{% load utils_tags typogrify_tags statistics_tags %}

<ul class="NB-interactions">
    {% for activity in activities %}
    <li class="NB-interaction NB-activity-{{ activity.category }} {% if activity.is_new %}NB-highlighted{% endif %} {% if activity.category == 'signup' %}NB-disabled{% endif %}"
        {% if activity.content_id %}data-content-id="{{ activity.content_id }}"{% endif %}
        {% if activity.feed_id %}data-feed-id="{{ activity.feed_id }}"{% endif %}
        {% if activity.with_user_id %}data-user-id="{{ activity.with_user_id }}"{% endif %}
        {% if activity.with_user %}data-username="{{ activity.with_user.username }}"{% endif %}>

        {% if activity.category == 'follow' %}
            <img class="NB-interaction-photo" src="{{ activity.photo_url }}"  data-user-id="{{ activity.with_user_id }}">
            <div class="NB-interaction-title">
                {{ username }} followed
                <span class="NB-interaction-username NB-splash-link" data-user-id="{{ activity.with_user_id }}">{{ activity.with_user.username }}</span>.
            </div>
            <div class="NB-interaction-date">
                {{ activity.time_since }} ago
            </div>
        {% endif %}
        
        {% if activity.category == 'signup' %}
            <img class="NB-interaction-photo" src="{{ activity.photo_url }}"  data-user-id="{{ activity.with_user_id }}">
            <div class="NB-interaction-title">
                {{ username }} signed up for NewsBlur.
            </div>
            <div class="NB-interaction-date">
                {{ activity.time_since }} ago
            </div>
        {% endif %}

        {% if activity.category == 'comment_reply' %}
            <img class="NB-interaction-photo" src="{{ activity.photo_url }}" data-feed-id="{{ activity.feed_id }}">
            <div class="NB-interaction-title">
                {{ username }} replied to <span class="NB-interaction-username NB-splash-link" data-user-id="{{ activity.with_user_id }}">{{ activity.with_user.username }}</span>:
            </div>
            <div class="NB-interaction-content">
                "<span class="NB-interaction-reply-content" data-story-id="{{ activity.content_id }}">{{ activity.content|safe|truncatewords:128 }}</span>"
            </div>
            <div class="NB-interaction-date">
                {{ activity.time_since }} ago
            </div>
        {% endif %}

        {% if activity.category == 'comment_like' %}
            <img class="NB-interaction-photo" src="{{ activity.photo_url }}"  data-user-id="{{ activity.with_user_id }}">
            <div class="NB-interaction-title">
                {{ username }} favorited <span class="NB-interaction-username NB-splash-link" data-user-id="{{ activity.with_user_id }}">{{ activity.with_user.username }}</span>'s comments on <span class="NB-interaction-sharedstory-title NB-splash-link">{{ activity.title|safe|truncatewords:6 }}</span>:
            </div>
            <div class="NB-interaction-content">
                "<span class="NB-interaction-sharedstory-content">{{ activity.content|truncatewords:8 }}</span>"
            </div>
            <div class="NB-interaction-date">
                {{ activity.time_since }} ago
            </div>
        {% endif %}

        {% if activity.category == 'sharedstory' %}
            <img class="NB-interaction-photo" src="/rss_feeds/icon/{{ activity.story_feed_id }}" data-feed-id="{{ activity.story_feed_id }}">
            <div class="NB-interaction-title">
                {{ username }} shared <span class="NB-interaction-sharedstory-title NB-splash-link">{{ activity.title|safe|truncatewords:6 }}</span>{% if activity.content %}:{% else %}.{% endif %}
            </div>
            {% if activity.content %}
                <div class="NB-interaction-content">
                    "<span class="NB-interaction-sharedstory-content">{{ activity.content|safe|truncatewords:36 }}</span>"
                </div>
            {% endif %}
            <div class="NB-interaction-date">
                {{ activity.time_since }} ago
            </div>
        {% endif %}
        
        {% if activity.category == 'star' %}
            <img class="NB-interaction-photo" src="{{ MEDIA_URL }}img/icons/nouns/saved-stories.svg">
            <div class="NB-interaction-title">
                You saved "<span class="NB-interaction-starred-story-title NB-splash-link">{{ activity.content|safe|truncatewords:6 }}</span>".
            </div>
            <div class="NB-interaction-date">
                {{ activity.time_since }} ago
            </div>
        {% endif %}

        {% if activity.category == 'feedsub' %}
            <img class="NB-interaction-photo" src="/rss_feeds/icon/{{ activity.feed_id }}">
            <div class="NB-interaction-title">
                You subscribed to <span class="NB-interaction-feed-title NB-splash-link">{{ activity.content|truncatewords:8 }}</span>.
            </div>
            <div class="NB-interaction-date">
                {{ activity.time_since }} ago
            </div>
        {% endif %}
        
        {% if activity.category == 'opml_import' or activity.category == 'opml_export' %}
            <img class="NB-interaction-photo" src="{{ MEDIA_URL }}img/icons/circular/g_icn_folder_rss.png">
            <div class="NB-interaction-title">
                {{ activity.content }}
            </div>
            <div class="NB-interaction-date">
                {{ activity.time_since }} ago
            </div>
        {% endif %}
        
    </li>
    {% endfor %}
</ul>
